<template>
    <div class="table-demo">
        <el-table
            ref="table"
            :data="tableData.data"
            border
            class="main-table"
            size="mini"
            :height="height"
            style="width: 100%"
            :row-key="tableData.rowKey"
            highlight-current-row
            stripe
            @row-dblclick="tableData.dbClick"
            @current-change="tableData.currentChange"
        >
            <el-table-column v-if="tableData.isCheck" type="selection" width="55"></el-table-column>
            <el-table-column
                align="center"
                v-for="column in tableData.columns"
                :key="column.key"
                :label="column.label"
                :width="column.width"
                :prop="column.key"
                :sortable="column.sortable"
            >
                <template slot-scope="scope">
                    <span v-if="column.key === 'num'">{{scope.$index+1}}</span>
                    <span v-else-if="column.key === 'picture'">
                        <img
                            :src="scope.row[column.key]?scope.row[column.key]:localUrl"
                            width="100px"
                            max-height="100px"
                        />
                    </span>
                    <!-- 操作按钮 -->
                    <span v-else-if="column.key === 'operationsModel'">
                        <el-button
                            size="mini"
                            v-for="(btn,btnIndex) in tableData.btnList"
                            v-show="!btn.isShow || (btn.isShow && btn.isShow(scope.row))"
                            :key="btnIndex"
                            :type="btn.type"
                            @click="btn.event(scope.row.id,scope.$index)"
                        >{{btn.label}}</el-button>
                    </span>
                    <span v-else>{{scope.row[column.key]?scope.row[column.key]:'未知'}}</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            v-if="tableData.page"
            layout="total, prev, pager, next, jumper"
            :current-page.sync="tableData.page.currentPage"
            prev-text="上一页"
            next-text="下一页"
            :page-size="20"
            :total="tableData.page.total"
            @current-change="tableData.page.currentChange"
            class="page-demo"
        ></el-pagination>
    </div>
</template>

<script>
import url from "../../assets/404_images/404_cloud.png";
export default {
    props: {
        tableData: Object,
        height: {
            // default: "calc(100vh - 240px)"
        },
        bottom: {
            default: "10px"
        },
        right: {
            default: "10px"
        }
    },
    data() {
        return {
            localUrl: url
        };
    }
};
</script>

<style lang="scss">
.table-demo{
    height: calc(100% - 50px);
    .el-table--border{
        height: calc(100% - 40px);
    }
}
.page-demo {
    // position: absolute;
    margin-top: 10px;
}
</style>